<!--
 * @Author: 杨超
 * @Date: 2021-08-06 17:25:51
 * @LastEditTime: 2021-09-26 14:27:11
 * @LastEditors: 杨超
 * @Description:
-->
<template>
    <el-cascader
        ref="cascader"
        v-model="ids"
        v-bind="$attrs"
        filterable
        :options="options"
        :disabled="disabledByParams || disabled"
        style="width: 100%"
        :placeholder="placeholder"
        @change="change"
    />
</template>

<script>
import {
    BTCBridgeModel,
    BTCTunnelModel,
    BTCCulvertModel,
    AssetHighwallModel,
    IndoorDistributionModel,
    EmbankmentModel,
    SignModel,
    LaneModel,
    FireProtectionFacilityModel
} from '@/models'
import { Directions } from '@/config/constants'

export default {
    name: 'NewFacilitySelect',
    props: {
        disabled: {
            type: Boolean,
            default: false
        },
        value: {
            type: Array,
            default: () => []
        },
        params: {
            type: Object,
            default: () => {}
        },
        placeholder: {
            type: String,
            default: '请选择'
        }
    },
    data() {
        return {
            bridgeModel: new BTCBridgeModel(), // 桥梁
            tunnelModel: new BTCTunnelModel(), // 隧道
            highwallModel: new AssetHighwallModel(), // 边坡
            culvertModel: new BTCCulvertModel(), // 涵洞
            indoorDistributionModel: new IndoorDistributionModel(), // 室内配电场所
            embankmentModel: new EmbankmentModel(), // 路堤
            signModel: new SignModel(), // 标志
            laneModel: new LaneModel(), // 应急避险车道
            fireProtectionFacilityModel: new FireProtectionFacilityModel(), // 消防设施
            ids: [],
            options: [],
            bridgeList: [],
            tunnelList: [],
        }
    },
    computed: {
        disabledByParams() {
            return !(Object.values(this.params).every(item => !!item))
        }
    },
    watch: {
        value: {
            deep: true,
            handler(newValue) {
                this.ids = newValue
                if (this.ids && this.ids.length > 0) {
                    this.$nextTick(() => {
                        const checkedNodes = this.$refs['cascader'].getCheckedNodes()[0]
                        if (checkedNodes) {
                            this.$emit('update:name', checkedNodes.pathLabels.join('/'))
                            // 后端要数组
                            this.$emit('update:lngLat', [checkedNodes.data.lngLat])
                            this.$emit('change', this.ids, this.options)
                        }
                    })
                }
            }
        },
        params: {
            deep: true,
            handler(val, oldVal) {
                const newJson = JSON.stringify(val)
                const oldJson = JSON.stringify(oldVal)
                if (newJson === oldJson) {
                    return
                }
                if (Object.values(val).every(item => !!item)) {
                    this.options = []
                    console.log(1111)
                    this.init()
                }
            }
        },
    },
    async created() {
        this.ids = this.value
        if (Object.values(this.params).every(item => !!item)) {
            await this.init()
        }
    },
    methods: {
        async init() {
            await Promise.all([
                this.getBridgeList(),
                this.getTunnelList(),
                // this.getHighwallList(),
                this.getCulvertList(),
                this.getIndoorDistributionList(),
                // this.getEmbankmentList(),
                // this.getSignList(),
                this.getLaneList(),
                this.getFireProtectionList()
            ]).then((res) => {
                this.options = [
                    {
                        label: '桥梁',
                        value: 1,
                        children: res[0]
                    },
                    {
                        label: '隧道',
                        value: 2,
                        children: res[1]
                    },
                    {
                        label: '涵洞',
                        value: 3,
                        children: res[2]
                    },
                    {
                        label: '配电房',
                        value: 4,
                        children: res[3]
                    },
                    {
                        label: '应急避险车道',
                        value: 5,
                        children: res[4]
                    },
                    {
                        label: '消防设施',
                        value: 6,
                        children: res[5]
                    }
                ]
                // this.options = [
                //     {
                //         label: '桥梁',
                //         value: 1,
                //         children: res[0]
                //     },
                //     {
                //         label: '隧道',
                //         value: 2,
                //         children: res[1]
                //     },
                //     {
                //         label: '边坡',
                //         value: 3,
                //         children: res[2]
                //     },
                //     {
                //         label: '涵洞',
                //         value: 4,
                //         children: res[3]
                //     },
                //     {
                //         label: '室内配电场所',
                //         value: 5,
                //         children: res[4]
                //     },
                //     {
                //         label: '路堤',
                //         value: 6,
                //         children: res[5]
                //     },
                //     {
                //         label: '沿线设施-标志',
                //         value: 7,
                //         children: res[6]
                //     },
                //     {
                //         label: '应急避险车道',
                //         value: 8,
                //         children: res[7]
                //     },
                //     {
                //         label: '消防设施',
                //         value: 9,
                //         children: res[8]
                //     }
                // ]
                if (this.ids && this.ids.length > 0) {
                    this.$nextTick(() => {
                        const checkedNodes = this.$refs['cascader'].getCheckedNodes()[0]
                        if (checkedNodes) {
                            this.$emit('update:name', checkedNodes.pathLabels.join('/'))
                            // 后端要数组
                            this.$emit('update:lngLat', [checkedNodes.data.lngLat])
                            this.$emit('change', this.ids, this.options)
                        }
                    })
                }
            })
        },
        change(val) {
            console.log('val', val)
            this.$emit('update:value', val)
            // 开启搜索选中时，不用$nextTick获取不到checkedNodes值
            this.$nextTick(() => {
                console.log('change')
                // const checkedNodes = this.$refs['cascader'].getCheckedNodes()[0]
                // this.$emit('update:name', checkedNodes.pathLabels.join('/'))
                // this.$emit('update:lngLat', [checkedNodes.data.lngLat])
                // this.$emit('change', val, this.options)
            })
        },
        getBridgeList() {
            return this.bridgeModel.getList({ highwayCode: this.params.roadCode, direction: Directions[this.params.direction], pageSize: 10000 }).then((res) => {
                return res.list.map((item) => {
                    return {
                        value: item.code,
                        label: item.name,
                        lngLat: item.centerLngAndLat
                    }
                })
            })
        },
        getTunnelList() {
            return this.tunnelModel.getTunnelList({ highwayCode: this.params.roadCode, direction: Directions[this.params.direction], pageSize: 10000 }).then((res) => {
                return res.list.map((item) => {
                    return {
                        value: item.code,
                        label: item.name,
                        lngLat: item.centerLngAndLat
                    }
                })
            })
        },
        getHighwallList() {
            return this.highwallModel.getList({ highwayCode: this.params.roadCode, direction: Directions[this.params.direction], pageSize: 10000 }).then((res) => {
                return res.list.map((item) => {
                    return {
                        value: item.code,
                        label: item.slopeName,
                        lngLat: item.lngAndLat
                    }
                })
            })
        },
        getCulvertList() {
            return this.culvertModel.getList({ highwayCode: this.params.roadCode, direction: Directions[this.params.direction], pageSize: 10000 }).then((res) => {
                return res.list.map((item) => {
                    return {
                        value: item.code,
                        label: item.name,
                        lngLat: item.lngAndLat
                    }
                })
            })
        },
        getIndoorDistributionList() {
            return this.indoorDistributionModel.getList({ highwayCode: this.params.roadCode, direction: Directions[this.params.direction], pageSize: 10000 }).then((res) => {
                return res.list.map((item) => {
                    return {
                        value: item.code,
                        label: item.name,
                        lngLat: item.lngAndLat
                    }
                })
            })
        },
        getEmbankmentList() {
            return this.embankmentModel.getList({ highwayCode: this.params.roadCode, direction: Directions[this.params.direction], pageSize: 10000 }).then((res) => {
                return res.list.map((item) => {
                    return {
                        value: item.code,
                        label: item.name,
                        lngLat: item.lngAndLat
                    }
                })
            })
        },
        getSignList() {
            return this.signModel.getList({ highwayCode: this.params.roadCode, direction: Directions[this.params.direction], pageSize: 10000 }).then((res) => {
                return res.list.map((item) => {
                    return {
                        value: item.code,
                        label: item.name,
                        lngLat: item.lngAndLat
                    }
                })
            })
        },
        getLaneList() {
            return this.laneModel.getList({ highwayCode: this.params.roadCode, direction: Directions[this.params.direction], pageSize: 10000 }).then((res) => {
                return res.list.map((item) => {
                    return {
                        value: item.code,
                        label: item.name,
                        lngLat: item.lngAndLat
                    }
                })
            })
        },
        getFireProtectionList() {
            return this.fireProtectionFacilityModel.getList({ highwayCode: this.params.roadCode, direction: Directions[this.params.direction], pageSize: 1000 }).then((res) => {
                return res.list.map((item) => {
                    return {
                        value: item.code,
                        label: item.name,
                        lngLat: item.lngAndLat
                    }
                })
            })
        }
        // highwallModel: new AssetHighwallModel(),  // 边坡
        // culvertModel: new BTCCulvertModel(),  // 涵洞
        // indoorDistributionModel: new IndoorDistributionModel(),  // 室内配电场所
        // embankmentModel: new EmbankmentModel(),  // 路堤
        // signModel: new SignModel(),  // 标志
        // laneModel: new LaneModel(),  // 应急避险车道
        // fireProtectionFacilityModel: new FireProtectionFacilityModel(),  // 消防设施
    }
}
</script>

<style lang="scss" scoped>
</style>
